<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
 <meta name="Generator" content="Xara HTML filter v.7.0.2.946"/>
 <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
 <title>creating and assigning bones</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <script language="JavaScript" type="text/javascript">document.documentElement.className="xr_bgh7";</script>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/custom_styles.css"/>
 <script type="text/javascript" src="index_htm_files/roe.js"></script>
</head>
<body class="xr_bgb7">
<div class="xr_ap" id="xr_xr" style="width: 760px; height: 1100px; top:0px; left:50%; margin-left: -380px;">
 <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<div id="xr_td" class="xr_td">
<div class="xr_ap xr_xri_" style="width: 760px; height: 1100px;">
 <span class="xr_ar" style="left: -564px; top: 1035px; width: 1900px; height: 65px; background-color: #2F7FAC;"></span>
 <div class="xr_s4" style="position: absolute; left:36px; top:182px; width:676px; height:476px;">
  <span class="xr_tl xr_s4" style="left: 258px; top: -14px;">(Creating bones to more easily animate complex objects or </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 3px;"><span class="xr_s4" style="">characters) </span>While you are not </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 21px;">required to use bones to animate with Spriter, and in act, for </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 39px;">many types of animations bones would </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 57px;">just be an inconvenience, for the case of animating complex </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 74px;">objects or characters the initial investment </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 92px;">of literally a minute or two to &#8220;rig&#8221; the character with bones will </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 110px;">end up making work much easier and </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 127px;">more natural, and save you a lot of time, even resulting in a </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 145px;">superior final animation.&nbsp; To create bones, </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 163px;">simply hold the Alt key and left click and drag from the point </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 181px;">you want the bone to begin to the point </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 198px;">where you want the bone to end.&nbsp; The point where the bone </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 216px;">begins (the thick end) acts as the pivot </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 234px;">point of the bone. When you let go of the left mouse button that </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 252px;">bone is done being created and is </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 269px;">automatically selected...if you create a new bone while the </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 287px;">previous bone is still selected, the new bone </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 305px;">will automatically be a child of the selected bone.&nbsp; You can </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 322px;">continue to hold Alt and create all of the </span>
  <span class="xr_tl xr_s1" style="top: 340px;">bones you need for the full character...just be sure the bone you want to be the next bone's parent is </span>
  <span class="xr_tl xr_s1" style="top: 358px;">selected while creating the new bone.&nbsp; At any time in this process you can let go of the Alt key and </span>
  <span class="xr_tl xr_s1" style="top: 376px;">select, move, rotate and scale any of the bones to perfect their position relative to the sprites you will be </span>
  <span class="xr_tl xr_s0" style="top: 393px;font-family:Times New Roman;"><span class="xr_s1" style="">assigning to them.</span></span>
 </div>
 <img class="xr_ap" src="index_htm_files/201.jpg" alt="" title="" style="left: 36px; top: 171px; width: 250px; height: 334px;"/>
 <div class="xr_s1" style="position: absolute; left:36px; top:639px; width:676px; height:476px;">
  <span class="xr_tl xr_s1" style="left: 202px; top: -14px;"><span class="xr_s4" style="">(Assigning Sprites as children of bones) </span>Now that your bones are set up </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 3px;">where you want for the whole character, properly aligned with the sprites, </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 21px;">you just need assign (child) the appropriate sprites to each of them.&nbsp; To do </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 39px;">this, simple select a bone by left clicking on it, and then hold the B </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 57px;">key...you'll see all Sprites become more translucent.&nbsp; Now if you left click </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 74px;">on any Sprite while still holding the B key, that Sprite will become a child </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 92px;">of the selected bone.&nbsp; You will see that it is now assigned because the </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 110px;">sprite is now more opaque.&nbsp; If you click that same sprite again while </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 127px;">holding B it will disassociate that sprite from the selected bone.&nbsp; You can </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 145px;">select as many sprites to each bone as you'd like. He sprite does not have </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 163px;">to be touching the bone, or even be close in proximity to the bone.&nbsp; Once </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 181px;">finished assigning all sprites to their respective bones I recommend you </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 198px;">quickly play with putting the character in extreme poses with limbs </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 216px;">overlapping the body and the other limbs so you can double-check that all </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 234px;">Sprites are z-ordered properly.&nbsp; This way, you won't have to stop and </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 252px;">manually fix the z-order of sprites across several key-frames once you're </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 269px;">animating.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/208.jpg" alt="" title="" style="left: 36px; top: 629px; width: 194px; height: 292px;"/>
 <div class="xr_s4" style="position: absolute; left:380px; top:128px; width:10px; height:10px;">
  <span class="xr_tc xr_s4" style="left: -123px; top: -14px; width: 246px;">Creating and Assigning Bones</span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 71px; width: 1900px; height: 24px; background-color: #2F7FAC;"></span>
 </a>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <span class="xr_ar xr_t10264" onmousemove="xr_mo(this,0,event)" style="left: -570px; top: 0px; width: 1900px; height: 70px; background-color: #5DABD7; -o-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -webkit-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -ms-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); transform: matrix(1.000,-0.000,0.000,-1.000,0,0);"></span>
 <!--[if lt IE 9]><style type="text/css">.xr_t10264 {margin-left:0px; margin-top:0px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.000,M21=-0.000,M12=0.000,M22=-1.000,sizingMethod='auto expand')}</style><![endif]-->
 </a>
 <div class="Heading_1" style="position: absolute; left:174px; top:47px; width:10px; height:10px;font-size:21px;color:#FFFFFF;">
  <h1 class="xr_tl Heading_1" style="top: -29px;font-size:21px;color:#FFFFFF;margin:0;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="font-size:32px;color:#FFFFFF;">Spriter Pro</span></a><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="color:#FFFFFF;">&nbsp;User&#8217;s Manual version 1.0</span></a></h1>
 </div>
 <div class="xr_s2" style="position: absolute; left:243px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -50px; top: -11px; width: 100px;"><a href="getting%20started.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Quickstart</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:350px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -35px; top: -11px; width: 69px;"><a href="default%20pivot%20points.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Sprites</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:441px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -31px; top: -11px; width: 63px;"><a href="javascript:;" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Bones</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:543px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -49px; top: -11px; width: 98px;"><a href="animating%20sprites%20and%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Animating</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:679px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -79px; top: -11px; width: 157px;"><a href="what%20are%20character%20maps.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Character Maps</span></a></span>
 </div>
 <a href="getting%20started.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/196.jpg" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 8px; top: 1px; width: 93px; height: 93px;"/>
 </a>
 <div class="xr_s2" style="position: absolute; left:132px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -27px; top: -11px; width: 54px;"><a href="index.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Index</span></a></span>
 </div>
 <a href="adjusting%20z%20orders.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/197.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <a href="adjusting%20z%20orders.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/198.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 984px; width: 34px; height: 34px;"/>
 </a>
 <a href="animating%20sprites%20and%20bones.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/199.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 984px; width: 34px; height: 34px;"/>
 </a>
 <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">
 <a href="" onclick="return(false);" onmousedown="xr_ppir(this);">
 </a>
 </div>
 <a href="animating%20sprites%20and%20bones.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/200.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <div id="xr_xd0"></div>
</div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript">xr_aeh()</script><![endif]--><!--[if !IE]>--><script type="text/javascript">xr_htm();window.addEventListener('load', xr_aeh, false);</script><!--<![endif]-->
</body>
</html>